<!--
 * @Description: 应用中心
 * @Author: seadon & zhaoxiaoyang
 * @LastEditors: seadon
 * @Date: 2021-07-10 17:33:44
 * @LastEditTime: 2022-09-22 17:40:55
-->
<template>
	<div class="pok-application-center">
		<div class="title-types">
			<!-- 顶部标题栏 -->
			<section class="title">
				<!-- 标题 -->
				<div class="left-content">
<!--					<img-->
<!--						src="@/assets/images/application.svg"-->
<!--						class="left-conten-image"-->
<!--					/>-->
          <i
            class="shu-icon"
          ></i>
					<div class="left-conten-text">
						{{ $t('pages.application.name', '应用中心') }}
					</div>
				</div>
				<!-- 搜索与模式切换 -->
				<div class="right-content">
					<input-search
						class="right-content-search"
            style="color: #1f2329; font-weight: bolder;"
						:search-placeholder="
							$t('pages.application.searchPlaceholder', '可搜索应用名称')
						"
						@search="handleSearch"
					></input-search>

					<div class="icon-box" @click="handleChangeMode">
						<i
							class="low-code application-icon"
							:class="activeMode ? 'iconcarousel1' : 'iconliebiaoxingshi1 '"
						></i>
					</div>
				</div>
			</section>
			<!-- 应用分类 -->
			<section v-if="isPcSearch" class="category">
				<CategorySkeleton v-if="getLoading && !groupListRef.length" />
				<pok-application-category
					v-else
					:data="groupListRefs"
					@on-change-type="handleChangeType"
				/>
			</section>
		</div>
		<!-- 应用列表 -->
		<section class="list">
			<!-- 应用中心列表 -->
			<pok-application-list
				v-if="
					(applicationListRefs && applicationListRefs.length) ||
					getLoading ||
					mountedFlag
				"
				:data="applicationListRefs"
				:is-pc-search="isPcSearch"
				:pc-app-card-type="pcAppCardType"
				:all-total="allTotal"
				:all-total-length="allTotalLength"
				:mode="activeMode ? ListModeEnum.Card : ListModeEnum.Table"
				:loading="getLoading"
				:all-loading="allLoading"
				@on-update-list="handleSearch"
				@on-get-all="handleFetchAll"
			/>
			<no-data v-else class="pok-no-data"></no-data>
		</section>
	</div>
</template>

<script lang="ts">
export default {
	name: 'PokApplicationIndex',
}
</script>
<script setup lang="ts">
import {
	ref,
	unref,
	onMounted,
	onBeforeMount,
	onBeforeUnmount,
	watch,
} from 'vue'
import { throttle } from 'lodash'
import { useHomeContext } from '@/entry_desktop/views/Home/hooks/useContext'
import NoData from '@/entry_desktop/components/NoData/NoData.vue'
import InputSearch from '@/entry_desktop/components/InputSearch/index.vue'
import PokApplicationCategory from './components/ApplicationCateGory/index.vue'
import PokApplicationList from './components/NewApplicationList/index.vue'
import { CategorySkeleton } from './skeleton'
import useModel from './hooks/useModel'
import { ListModeEnum } from './constant/listEnum'
import './index.less'

const keyword = ref('') //搜索名称
const activeId = ref('')
const page_index: any = ref(1)
const mountedFlag = ref(true)
const isPcSearch = ref(false)
const pcAppCardType = ref('')

const {
	getLoading,
	groupListRef,
	groupListRefs,
	applicationListRefs,
	applyForGroupingAllList,
	termination,
	fetchList,
	fetchAppList,
	fetchAllAppList,
	applicationGroupList,
	applyForGroupingList,
	allLoading,
	allTotal,
	allTotalLength,
	getTenantCustomConfigMap,
} = useModel({ activeId })

// 展示模式
const activeMode = ref(true)
const { homeEmitter } = useHomeContext()

const handleChangeMode = () => {
	activeMode.value = !unref(activeMode)
}

// 搜索
const handleSearch = (value: string) => {
	keyword.value = value
	page_index.value = 1
	termination.value = false
	unref(isPcSearch)
		? fetchList(unref(keyword), unref(activeId))
		: fetchAllAppList(unref(keyword))
}

//应用中心类型切换
const handleChangeType = (id: string) => {
	activeId.value = id
	page_index.value = 1
	handleSearch(keyword.value)
}

//加载更多
const handleFetchAll = (id: string) => {
	activeId.value = ''
	unref(isPcSearch)
		? fetchAppList(unref(keyword), id)
		: fetchAllAppList(unref(keyword))
}

let stopWatch: () => void
// 页面滚动时
const onScrollInWindow = throttle(() => {
	// 文档内容实际高度（包括超出视窗的溢出部分）
	const scrollHeight = Math.max(
		document.documentElement.scrollHeight,
		document.body.scrollHeight
	)
	//滚动条滚动距离
	const scrollTop =
		window.pageYOffset ||
		document.documentElement.scrollTop ||
		document.body.scrollTop
	//窗口可视范围高度
	const clientHeight =
		window.innerHeight ||
		Math.min(document.documentElement.clientHeight, document.body.clientHeight)
	if (
		clientHeight + scrollTop >= scrollHeight - 1 &&
		!unref(keyword) &&
		!unref(activeId) &&
		!unref(termination)
	) {
		if (unref(page_index) === 1) {
			stopWatch && stopWatch()
		}
		page_index.value += 1
		applyForGroupingList(page_index.value, false)
	}
}, 800)

onBeforeMount(() => {
	homeEmitter.on('custom:fetchList', () => {
		unref(isPcSearch)
			? fetchList(unref(keyword), unref(activeId))
			: fetchAllAppList(unref(keyword))
	})
})

onBeforeUnmount(() => {
	window.removeEventListener('scroll', onScrollInWindow, false)
})

onMounted(() => {
	getTenantCustomConfigMap().then(tenantCustomConfigMap => {
		isPcSearch.value = tenantCustomConfigMap?.search_app_type > 0
		pcAppCardType.value =
			tenantCustomConfigMap?.pc_app_card_type ?? 'CardStyleA'

		if (unref(isPcSearch)) {
			stopWatch = watch(getLoading, value => {
				if (!value) {
					setTimeout(() => {
						window.addEventListener('scroll', onScrollInWindow, false)
					}, 100)
				}
			})
		}
		applicationGroupList()
		unref(isPcSearch) ? applyForGroupingList() : applyForGroupingAllList()
		mountedFlag.value = false
	})
})
</script>
